<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>rent8-最常用出租屋管理系统</title>
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <!-- 导入 axios -->
  <script src="__STATIC__/js/axios.min.js"></script>
  <!-- 导入 Vue3 -->
  <script src="__CDN__/vue/3.4.19/vue.global.js"></script>
  <!-- 导入 TDesign 组件库 -->
  <script src="__CDN__/tdesign/1.9.9/tdesign.min.js"></script>
  <link rel="stylesheet" href="__CDN__/tdesign/1.9.9/tdesign.min.css" />
  <!-- 导入 TDesign icon -->
  <script src="__CDN__/tdesign-icons/0.2.2/index.js"></script>
  <link rel="stylesheet" href="__CDN__/tdesign-icons/0.2.2/index.css" />
  <!-- 导入 login css -->
  <link rel="stylesheet" href="__STATIC__/css/login.css">
</head>

<body>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      background-image: url("__STATIC__/images/login-bg.png");
      background-size: 100% 100%;
    }
  </style>
  <div id="app">
    <t-space direction="vertical">
      <t-loading :loading="loading" text="登录中..." fullscreen />
    </t-space>
    <div class="login-header ">
      <div></div>
      <div class="operations-container">
        <t-button theme="default" shape="square" variant="text" @click="navToGitee">
          <t-icon name="logo-github" class="icon" />
        </t-button>
        <t-button theme="default" shape="square" variant="text" @click="navToHelper">
          <t-icon name="help-circle" class="icon" />
        </t-button>
      </div>
    </div>

    <div class="login-container">
      <div class="title-container">
        <h1 class="title margin-no">登录到</h1>
        <h1 class="title">最常用出租屋管理系统</h1>
      </div>

      <div style="width: 350px">
        <t-form ref="form" :data="formData" :rules="FORM_RULES" :colon="true" :label-width="0">
          <t-form-item name="username">
            <t-input v-model="formData.username" clearable placeholder="请输入账户名">
              <template #prefix-icon>
                <t-icon name="user" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item name="password">
            <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码" @enter="onSubmit">
              <template #prefix-icon>
                <t-icon name="lock-on" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item>
            <t-button theme="primary" @click="onSubmit" block size="medium">登录</t-button>
          </t-form-item>
        </t-form>
      </div>
    </div>

    <footer class="copyright">Copyright @ 2024-{{ new Date().getFullYear() }} 最常用 All Rights Reserved</footer>
  </div>


  <script>
    const App = {
      data() {
        return {
          loading: false,
          formData: {
            username: '',
            password: '',
          },
          FORM_RULES: {
            username: [{ required: true, message: '账号必填', type: 'error' }],
            password: [{ required: true, message: '密码必填', type: 'error' },
            { min: 6, message: '密码最少6位数', type: 'error', trigger: 'blur' },],
          },
        };
      },
      methods: {
        onSubmit() {
          this.$refs.form.validate().then((valid) => {
            if (valid == true) {
              this.login();
            }
          });
        },

        async login() {
          try {
            this.loading = true;
            const response = await axios.post("{:url('Index/login')}", this.formData, {
              headers: {
                'X-CSRF-TOKEN': '{$token}',
              },
            });
            if (response.status == 200) {
              if (response.data.code) {
                location.href = "{:url('Index/index')}";
                this.$message.success({
                  content: response.data.msg,
                  duration: 1500,
                });
              } else {
                this.$message.error({
                  content: response.data.msg,
                  duration: 1500,
                });
              }
              this.loading = false;
            }
          } catch (error) {
            this.loading = false;
            this.$message.error({
              content: '系统出错',
              duration: 1500,
            });
            console.error('请求失败：', error);
          }
        },
        navToGitee: function () {
          window.open('https://gitee.com/MarcoMaHH/rent8');
        },
        navToHelper: function () {
          window.open('https://blog.csdn.net/m0_61078449/article/details/142572124');
        },
      }
    };
    const app = Vue.createApp(App);
    app.use(TDesign);
    app.mount("#app");
  </script>
</body>

</html>